<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
body{
	padding:0;margin:0;background-size: cover;
	width: 100vw;
	height: 100vh;
	font-family: "微软雅黑";
}
#img_cortana{
	width: 81px;height:60px;
	position:fixed;
	left: calc(50% - 40px);
	top: 40%;
	-webkit-animation:myfirst alternate linear infinite 10s;

}
	@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    25% {-webkit-transform:rotate3d(-30,20,30,30deg);}
    50% {-webkit-transform:rotate3d(30,20,-30,30deg);}
    75% {-webkit-transform:rotate3d(-30,20,30,30deg);}
}
#search{
	border:0;outline: none;border-bottom:1px solid white;
	position: fixed;width: 40vw;left: 30vw;
	font-size: 26px;background:none;font-family: "微软雅黑";
	color:white;top: 35vh;

}
#time{font-size: 80px;
position: fixed;
left: 20px;
bottom: 50px;color: white;font-weight: 100;
}
#date{font-size: 32px;position: fixed;
left: 20px;
bottom: 20px;color: white;}
.btn{height: 120px;width: 120px;background: white;position: fixed;bottom: 20px;padding:6px 16px 0 24px;box-sizing: border-box;border:2px solid white;
	box-shadow: 0px 10px 20px black;font-weight: bold}
#btn_temp{left:calc(50% - 260px);}
#btn_humi{left:calc(50% - 130px);}
#btn_pm25{left:calc(50% - 0px);width: 200px}
#btn_power{left:calc(50% + 210px);}
.off{background-color: rgba(0,0,0,0);color:white;box-shadow:none;}
.icon{
	margin-bottom: 10px;
	background-image: url('');
	width: 68px;
	height: 68px;
	background-size: 272px 68px;
	background-position: 0;
}
.off .icon{
	background-image: url('');
}
.off{
	background-color: rgba(0,0,0,0);
}
#btn_humi .icon{background-position-x: -68px}
#btn_pm25 .icon{background-position-x: -136px}
#btn_power .icon{background-position-x: 68px}
#btn_pm25 span:nth-child(3){
	position: absolute;
	margin-top: -80px;
}
#btn_pm25 span:nth-child(4){
	position: absolute;
	margin-top: -53px;
}
#btn_pm25 span:nth-child(5){
	position: absolute;
	margin-top: -26px;
}
table{
	color:white;
	font-size:24px;
	position: fixed;
	right: 20px;
	bottom:20px;
	line-height: 34px;
}
#w_aqi::before{
	content: "AQI ";
	font-size: 16px;
	font-weight: normal;
}
#w_w1::before{
	content: "今 ";
	font-size: 16px;
	font-weight: normal;
}
#w_w2::before{
	content: "明 ";
	font-size: 16px;
	font-weight: normal;
}

input::-webkit-input-placeholder{color:rgba(255,255,255,0.5)!important;}
</style>
<body>
<div class="btn" id="btn_temp"><div class="icon"></div><span id="air_temp">温度 12℃</span></div>
<div class="btn" id="btn_humi"><div class="icon"></div><span id="air_humi">湿度 65%</span></div>
<div class="btn" id="btn_pm25">
	<div class="icon"></div>
	<span>空气质量&nbsp;&nbsp;&nbsp;</span>
	<span id="air_pm025">PM2.5 20</span>
	<span id="air_pm010">PM1.0 20</span>
	<span id="air_pm100">PM10 20</span>
	<span id="air_smoke">可燃 无</span>
</div>
<div class="btn" id="btn_power"><div class="icon"></div><span>电源 开</span></div>
<div  id="time">下午 9:53</div>
<div  id="date">2017年2月5日 正月初九</div>
<input type="text" id="search" placeholder="搜索">
<img id="img_cortana" src="" alt="">
<table  onclick="hi_weather()">
	<tr><td id="w_aqi">140<td><td id="w_a">中度污染<td></tr>
	<tr><td id="w_w1">阴<td><td id="w_t1">10℃~4℃<td></tr>
	<tr><td id="w_w2">晴转多云<td><td id="w_t2">10℃~4℃<td></tr>
</table>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
// 每整点获取天气显示（语音播报天气）
function getDateCN(){
  Stamp = new Date(); 
  var time={
    "DATETIME":Stamp.toLocaleString('zh-CN', { hour12: false }).replace(/\//g, '-').replace(/\b\d\b/g, '0$&'),
    "DATE":Stamp.toLocaleDateString().replace(/\//g, '-'),
    "YYYY":Stamp.getFullYear(),
    "M":(Stamp.getMonth() + 1<10)?("0"+(Stamp.getMonth() + 1)):(Stamp.getMonth() + 1),
    "D":(Stamp.getDate()<10)?("0"+Stamp.getDate()):Stamp.getDate(),
    "h":(Stamp.getHours()<10)?("0"+Stamp.getHours()):Stamp.getHours(),
    "m":(Stamp.getMinutes()<10)?("0"+Stamp.getMinutes()):Stamp.getMinutes(),
    "s":(Stamp.getSeconds()<10)?("0"+Stamp.getSeconds()):Stamp.getSeconds(),
    "ms":(Array(3).join(0) + Stamp.getMilliseconds()).slice(-3),
    "ww":new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六")[Stamp.getDay()]
  };
  return time;
}
var hi_weather=function(){
	$.get("a.php?action=weather",
        function(data){
        	var date=getDateCN();
        	var weather=jQuery.parseJSON(data);
        	var wt="";
        	if (weather.aqi>300) {
        		wt="严重污染"
        	}
        	else if (weather.aqi>200) {
        		wt="重度污染"
        	}
        	else if (weather.aqi>150) {
        		wt="中度污染"
        	}
        	else if (weather.aqi>100) {
        		wt="轻度污染"
        	}
        	else if (weather.aqi>50) {
        		wt="良"
        	}
        	else {
        		wt="优"
        	}
        	$('#date').text(date.YYYY+"年"+date.M+"月"+date.D+"日" +weather.n);
        	$('#time').text(((date.h>12)?"下午":"上午")+" "+((date.h>12)?(date.h-12):date.h)+":"+date.m);
        	$('#w_aqi').text(weather.aqi);
        	$('#w_a').text(wt);
        	$('#w_w1').text(weather.weather1);
        	$('#w_t1').text(weather.temp1);
        	$('#w_w2').text(weather.weather2);
        	$('#w_t2').text(weather.temp2);
        	var sound_text="";
        	if(date.m==0&&date.h>7&&date.h<10){
        		sound_text="今天是"+$('#date').text()+"，"+date.ww+"，农历"+weather.n+"。"
        	}
        	sound_text+="现在是"+$('#time').text()+"。";
        	sound_text+="今天天气"+weather.weather1+","+weather.temp1+"。";
        	sound_text+="空气质量"+wt+"。";
        	sound_text+=weather.tip;
        	sound_text+="明天天气"+weather.weather2+","+weather.temp2+"。";
        	sound_text+="后天天气"+weather.weather2+","+weather.temp2+"。";
        	var utterThis = new window.SpeechSynthesisUtterance(sound_text);
        	utterThis.rate=3;
		window.speechSynthesis.speak(utterThis);
    });
}

// 每分钟修改时间
var hi_clock=function(){
       var date=getDateCN();
	$('#time').text((date.h>12)?"下午":"上午"+(date.h>12)?(date.h-12):date.h+":"+date.m);
}
// 每3秒获取空气（语音变更预警显示）
var hi_air=function(){
	$.get("a.php?action=air",
        function(data){
        	var air=jQuery.parseJSON(data);
        	$('#air_temp').text("温度 "+air.temp);
        	$('#air_humi').text("湿度 "+air.humi);
        	$('#air_pm025').text("PM2.5 "+air.pm025);
        	$('#air_pm010').text("PM1.0 "+air.pm010);
        	$('#air_pm100').text("PM10 "+air.pm100);
        	$('#air_smoke').text("烟雾 "+((air.smoke==1)?"无":"有"));
        	if(air.gpio_smoke==1){
        		$("#btn_power").removeClass("off");
        	}else{
        		$("#btn_power").addClass("off");
        	}
        	if(air.gpio_pm==1){
        		$("#btn_pm25").removeClass("off");
        	}else{
        		$("#btn_pm25").addClass("off");
        	}
        	if(air.gpio_humi==1){
        		$("#btn_humi").removeClass("off");
        	}else{
        		$("#btn_humi").addClass("off");
        	}
        	if(air.gpio_temp==1){
        		$("#btn_temp").removeClass("off");
        	}else{
        		$("#btn_temp").addClass("off");
        	}
        	var sound_text="";
        	//温度
        	if(air.temp>30)sound_text+="室内温度偏高，建议降温";
        	if(air.temp<10 && air.gpio_temp==0){
        		sound_text+="室内温度偏低，为您打开取暖器";
        		$.get("a.php?action=write&pin=5&level=1");
        	};
        	if(air.temp>13 && air.gpio_temp==1){
        		sound_text+="室内温度"+air.temp+"℃，为您关闭取暖器";
        		$.get("a.php?action=write&pin=5&level=0");
        	}
        	//湿度
        	if(air.humi<40 && air.gpio_humi==0){
        		sound_text+="室内湿度偏低，为您打开加湿器";
        		$.get("a.php?action=write&pin=0&level=1");
        	};
        	if(air.humi>55 && air.gpio_humi==1){
        		sound_text+="室内湿度，"+air.humi+"%，为您关闭加湿器";
        		$.get("a.php?action=write&pin=0&level=0");
        	}
        	//空气质量
        	if(air.pm025>40 && air.gpio_pm==0){
        		sound_text+="室内空气质量不佳，为您打开净化器";
        		$.get("a.php?action=write&pin=1&level=1");
        	};
        	if(air.pm025<20 && air.gpio_pm==1){
        		sound_text+="室内PM2.5，"+air.pm025+"，为您关闭净化器";
        		$.get("a.php?action=write&pin=1&level=0");
        	}
        	//烟雾报警
        	if(air.smoke==0 && air.gpio_smoke==0){
        		sound_text+="室内有烟雾或可燃气体。";
        		$.get("a.php?action=write&pin=2&level=1");
        	};
        	if(air.smoke==1 && air.gpio_smoke==1){
        		sound_text+="烟雾报警取消";
        		$.get("a.php?action=write&pin=2&level=0");
        	};
        	if(sound_text!=""){

	        	var utterThis = new window.SpeechSynthesisUtterance(sound_text);
	        	utterThis.rate=3;
			window.speechSynthesis.speak(utterThis);
        	}

    });
}
hi_air();
hi_clock();
// hi_weather();
setInterval("hi_air()",3000);
setInterval("hi_clock()",3600000);
setInterval("hi_weather()",3600000);
</script>
<style>
	body{
background-image: url('');
	}
</style>